<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        class="search-input" 
        placeholder="搜索标题" 
        placeholder-class="placeholder"
      />
      <uni-icons type="search" size="24" color="#666" />
    </view>

    <!-- 排序选项 -->
    <scroll-view class="sort-options" scroll-x>
      <text class="sort-item" :class="{ active: sortType === 'all' }" @click="changeSort('all')">全部</text>
      <text class="sort-item" :class="{ active: sortType === 'today' }" @click="changeSort('today')">今日</text>
    </scroll-view>

    <!-- 预约列表 -->
    <view class="reservation-list">
      <view class="reservation-item" v-for="(item, index) in reservations" :key="index">
        <text class="title">{{ item.title }}</text>
        <text class="time">{{ item.daytime }} {{ item.starttime }}~{{ item.endtime}}</text>
        <view class="actions flex-x-between">
			<view class="status" :class="{ success: item.status === 1, ended: item.status === 0 }">
			  {{ item.status == 1?'已预约':'已取消' }}
			</view>
          <view class="action-btn cancel flex-y-center p-lr-10" @click="cancelReservation(item)" v-if="item.status == 1">取消</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sortType: 'all', // 当前排序类型
      reservations: [],
	  form:{
		  personId:uni.getStorageSync('pId'),
		  pageNum:10,
		  pageSize:1
	  }
    };
  },
  onLoad() {
  	this.init()
  },
  methods: {
	  init(){
		  this.$rqt.getReservationDEtailByPersonId(this.form).then((res) => {
		  	if (res.code == 200) {
		  		this.reservations = res.data.records
		  		uni.hideLoading()
		  	}
		  	uni.hideLoading()
		  })
	  },
    // 切换排序类型
    changeSort(type) {
      this.sortType = type;
    },

    // 查看详情
    viewDetails(item) {
      uni.showToast({ title: `查看详情：${item.title}`, icon: 'none' });
    },

    cancelReservation(item) {
      uni.showModal({
        title: '提示',
        content: `确定要取消预约“${item.title}”吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showModal({
              title: '提示',
              content: '确定要取消预约吗？',
              success: (res) => {
                if (res.confirm) {
            			  this.$rqt.cancelReservation(this.form).then((res) => {
            			  	if (res.code == 200) {
            			  			
            			  		uni.hideLoading()
            			  	}
            			  	uni.hideLoading()
            			  })
            			  
                  uni.showToast({ title: '预约已取消', icon: 'none' });
                }
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
/* 全局样式 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
  }
  .placeholder {
    color: #999;
  }
}

/* 排序选项 */
.sort-options {
  white-space: nowrap;
  margin-bottom: 20rpx;
  .sort-item {
    display: inline-block;
    font-size: 28rpx;
    color: #666;
    margin-right: 40rpx;
    padding: 10rpx 0;
    &.active {
      color: #e64340;
      border-bottom: 4rpx solid #e64340;
    }
  }
}

/* 预约列表 */
.reservation-list {
  .reservation-item {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    .title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }
    .time {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
      display: block;
    }
    .status {
      font-size: 28rpx;
      margin-bottom: 20rpx;
      display: block;
      &.success {
        color: #07c160;
      }
      &.ended {
        color: #999;
      }
    }
    .actions {
      display: flex;
      justify-content: space-between;
      .action-btn {
        font-size: 28rpx;
        color: #333;
        &.cancel {
		  background-color: rgba(224, 67, 49, 0.2);
          color: #e64340;
		  border-radius: 12rpx;
        }
      }
    }
  }
}
</style>